<template>
  <div id="content">
    <div class="head">
      <div class="head-left">
        <div class="head-left-one">
          <img src="@/assets/touxiang.jpg" />
        </div>
        <div class="head-left-two">
          <p class="name">llll</p>
          <p class="type">普通用户</p>
        </div>
      </div>
      <div class="head-right">
        个人主页
      </div>
    </div>
    <div class="body">
      <div class="body-one">
        <div class="body-one-left">
          想看 >
        </div>
        <div class="body-one-mid">

        </div>
        <div class="body-one-right">
          看过 >
        </div>
      </div>
      <div class="body-two">
        <div class="body-two-left">
          <i class="iconfont icon-huiyuanzhongxin"></i>
        </div>
        <div class="body-two-mid">
          <div class="body-two-mid-top">
            1/30
          </div>
          <div class="body-two-mid-mid">

          </div>
          <div class="body-two-mid-bottom">
            <div class="body-two-mid-bottom-left">
              普通用户
            </div>
            <div class="body-two-mid-bottom-right">
              距升级只差29成长值
            </div>
          </div>
        </div>
        <div class="body-two-right">
          进入
        </div>
      </div>
      <div class="body-three">
        <div class="body-three-head">
          我的订单
        </div>
        <div class="body-three-content">
          <div class="body-three-content-dianyingpiao">
            <i class="iconfont icon-dianyingpiao"></i>
            <p>电影票</p>
          </div>
          <div class="body-three-content-yanchupiao">
            <i class="iconfont icon-yinlemusic214"></i>
            <p>演出票</p>
          </div>
          <div class="body-three-content-zaixianguanying">
            <i class="iconfont icon-24gf-playSquare"></i>
            <p>在线观影</p>
          </div>
          <div class="body-three-content-zhoubian">
            <i class="iconfont icon-gouwu"></i>
            <p>周边</p>
          </div>
        </div>
      </div>
      <div class="foot">
        <div class="foot-head">我的资产</div>
        <div class="foot-one">
          <div class="foot-one-one">
            优惠卷
          </div>
          <div class="foot-one-two">
            折扣卡
          </div>
          <div class="foot-one-three">
            猫享卡
          </div>
          <div class="foot-one-four">
            喵币
          </div>
        </div>
      </div>
      <div class="bottom">
        <div class="bottom-head">我的服务</div>
        <div class="bottom-content">
          <div class="bottom-content-one">
            买一赠一卷
          </div>
          <div class="bottom-content-two">
            关注公众号
          </div>
          <div class="bottom-content-three">
            9元看电影
          </div>
          <div class="bottom-content-four">
            猫眼商城
          </div>
          <div class="bottom-content-five">
            在线观影
          </div>
          <div class="bottom-content-six">
            云包场
          </div>
          <div class="bottom-content-seven">
            银行活动
          </div>
        </div>
      </div>

      <div class="but">
        <button @click="exit">退出</button>
      </div>


    </div>
    <div class="dianzi"></div>
    <TabBar/>
  </div>

</template>

<script>
import TabBar from "@/components/TabBar/ index"
export  default {
  name: 'firstView',
  methods:{
    exit() {
      this.$router.push({ path: 'mine' })
    },
  },
  components:{
    TabBar
  }
}
</script>

<style scoped>
img{
  width: 70px;
  height: 70px;
  border-radius: 50%;
  border: 2px solid white;
}
#content{
  background: linear-gradient(to bottom,#e54847 0%,#e54847 20%,#e54847 20%,white 30%,white 30%,white 100%);
}
.head{
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 0 15px;
  box-sizing: border-box;
  margin: 5px 0;
}
.head .head-left{
  display: flex;
  align-items: center;
}
.head .head-left .head-left-two{
  margin-left: 20px;
}
.head .head-left .head-left-two .name{
  font-size: 30px;
  color: white;
}
.head .head-left .head-left-two .type{
  width: 60px;
  border: 1px solid white;
  border-radius: 10px;
  font-size: 10px;
  align-items: center;
  padding-left: 10px;
  color: white;
}
.head .head-right{
  line-height: 74px;
  color: white;
}
.body{
  width: 100%;

}
.body .body-one{
  height: 50px;
  line-height: 50px;
  display: flex;
  justify-content: space-around;
  margin: 20px 15px;
  background-color: #c70404;
  border-radius: 20px;
}
.body .body-one-mid{
  height: 30px;
  width: 1px;
  background-color: white;
  margin-top: 7px;
}
.body .body-two{
  height: 70px;
  display: flex;
  background-color: white;
  margin: 20px 15px;
  border-radius: 20px;
  box-shadow: 0 0 20px -5px;
}
.body .body-two .body-two-left{
  width: 50px;
  line-height: 70px;
  padding-left: 5px;
}
.icon-huiyuanzhongxin{
  font-size: 50px;
}
.body .body-two .body-two-mid{
  margin-left: 15px;
}
.body .body-two .body-two-mid .body-two-mid-top{
  width: 40px;
  border: 1px solid #cccccc;
  border-radius: 10px;
  margin-top: 5px;
}
.body .body-two .body-two-mid .body-two-mid-mid{
  height: 3px;
  background: linear-gradient(to right,#ffd966 0%,#ffd966 5%,white 5%,white 95%);
  border: 1px solid #cccccc;
  border-radius: 10px;
  margin-top: 5px;
}
.body .body-two .body-two-mid .body-two-mid-bottom{
  display: flex;
  margin-top: 5px;
}
.body .body-two .body-two-mid .body-two-mid-bottom .body-two-mid-bottom-left{
  width: 50px;
  height: 20px;
  border: 1px solid #cccccc;
  font-size: 5px;
}
.body .body-two .body-two-mid .body-two-mid-bottom .body-two-mid-bottom-right{
  line-height: 20px;
  margin-left: 5px;
  font-size: 5px;
}
.body .body-two .body-two-right{
  width: 70px;
  height: 35px;
  border: 1px solid red;
  border-radius: 20px;
  margin-left: 20px;
  margin-top: 15px;
  text-align: center;
  line-height: 35px;
  color: red;
}
.body .body-three{
  height: 120px;
  background-color: white;
  margin: 20px 15px;
  border-radius: 20px;
  box-shadow: 0 0 20px -5px;
}
.body .body-three .body-three-head{
  margin-left: 5px;
  margin-top: 5px;
  font-size: 20px;
}
.body .body-three .body-three-content{
  display: flex;
  justify-content: space-around;
  margin-top: 20px;
}
.icon-dianyingpiao{
  font-size: 30px;
  margin-left: 10px;
}
.icon-gouwu{
  font-size: 30px;
  margin-left: 10px;
}
.icon-yinlemusic214{
  font-size: 30px;
  margin-left: 10px;
}
.icon-24gf-playSquare{
  font-size: 30px;
  margin-left: 20px;
}
.body-three-content-zhoubian p{
  margin-left: 7px;
}
.foot{
  height: 70px;
  display: flex;
  flex-wrap: wrap;
  background-color: white;
  margin: 20px 15px;
}
.foot .foot-head{
  font-size: 20px;
}
.foot .foot-one{
  width: 100%;
  display: flex;
  justify-content: space-around;
  margin-top: 20px;
}
.foot .foot-one .foot-one-one{
  width: 80px;
  height: 50px;
  line-height: 50px;
  border:1px solid orange;
  border-radius: 5px;
  text-align: center;
  background-color: #f9e3a0;
  color: orange;
  font-weight: bolder;
}
.foot .foot-one .foot-one-two{
  width: 80px;
  height: 50px;
  line-height: 50px;
  border:1px solid pink;
  border-radius: 5px;
  text-align: center;
  background-color: pink;
  color: red;
  font-weight: bolder;
}
.foot .foot-one .foot-one-three{
  width: 80px;
  height: 50px;
  line-height: 50px;
  border:1px solid blue;
  border-radius: 5px;
  text-align: center;
  background-color: #8cb2f2;
  color: blue;
  font-weight: bolder;
}
.foot .foot-one .foot-one-four{
  width: 80px;
  height: 50px;
  line-height: 50px;
  border:1px solid pink;
  border-radius: 5px;
  text-align: center;
  background-color: pink;
  color: red;
  font-weight: bolder;
}
.bottom{
  width: 100%;
}
.bottom .bottom-head{
  font-size: 20px;
  margin-top: 50px;
  margin-left: 15px;
}
.bottom .bottom-content .bottom-content-one{
  border: 1px solid black;
  text-align: center;
  margin: 0 30px 10px 30px;
  border-radius: 10px;
}
.bottom .bottom-content .bottom-content-two{
  border: 1px solid black;
  text-align: center;
  margin: 0 30px 10px 30px;
  border-radius: 10px;
}
.bottom .bottom-content .bottom-content-three{
  border: 1px solid black;
  text-align: center;
  margin: 0 30px 10px 30px;
  border-radius: 10px;
}
.bottom .bottom-content .bottom-content-four{
  border: 1px solid black;
  text-align: center;
  margin: 0 30px 10px 30px;
  border-radius: 10px;
}
.bottom .bottom-content .bottom-content-five{
  border: 1px solid black;
  text-align: center;
  margin: 0 30px 10px 30px;
  border-radius: 10px;
}
.bottom .bottom-content .bottom-content-six{
  border: 1px solid black;
  text-align: center;
  margin: 0 30px 10px 30px;
  border-radius: 10px;
}
.bottom .bottom-content .bottom-content-seven{
  border: 1px solid black;
  text-align: center;
  margin: 0 30px 10px 30px;
  border-radius: 10px;
}
.but{
  width: 100%;
  height: 50px;
  text-align: center;
}
.but button{
  width: 315px;
  height: 30px;
  background-color: #c70404;
  border: none;
  border-radius: 20px;
  margin: 30px 30px 10px 30px;
}
.dianzi{
  height: 90px;
}
</style>
